import React, {Component} from 'react';
import {connect} from 'dva';
import {Card, Form, Modal, Spin, Table} from "antd";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {FormattedMessage} from 'umi/locale';
import APP from "@/components/Tool/BaseAPP";

let pagingData = {
    _pageSize: 10,
    _current: 1,
    _total: 0,
};

@connect(({noticeModel}) => ({
    noticeModel,
}))
@Form.create()
class NoticeLook extends Component {
    state = {
        loading: false,
        pageDataSource: [],
        isShowModal: false,
        showData: {}
    };

    componentDidMount() {
        this.findPageDataSource();
    }

    render() {
        const that = this;
        const {
            loading,
            pageDataSource
        } = that.state;

        return (
            <Spin spinning={loading}>
                <PageHeaderWrapper title={<FormattedMessage id={'menu.noticeLook'} />}>
                    <Card>
                        <Table
                            bordered
                            rowKey={data => `${data.id}`}
                            columns={that.columns}
                            dataSource={pageDataSource}
                            pagination={{
                                pageSize: pagingData._pageSize,
                                current: pagingData._current,
                                total: pagingData._total,
                                onChange: (page, pageSize) => {
                                    pagingData._current = page;
                                    that.findPageDataSource();
                                },
                                showTotal: total => `共 ${total} 条数据`,
                            }}
                        />
                    </Card>
                    <ShowNoticeModal parent={this} />
                </PageHeaderWrapper>
            </Spin>
        );
    }

    columns = [{
        title: '发布时间',
        dataIndex: 'createTime',
        key: 'createTime',
    }, {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        render: (text, record) => {
            return <a onClick={() => this.getDataById(record.id)}>{text}</a>
        }
    }];

    getDataById(id) {
        const that = this;
        const {dispatch} = that.props;
        APP.loading(that);
        dispatch({
            type: "noticeModel/getNoticeById",
            payload: {id: id},
            callback: function (data) {
                that.findResponseByUrl(data.datas.content, function(result) {
                    data.datas.content = result;
                    that.setState({
                        loading: false,
                        showData: data.datas,
                        isShowModal: true
                    });
                });
            }
        });
    }

    findPageDataSource = e => {
        let that = this;
        const {form, dispatch} = that.props;
        let params = {...pagingData};
        if (e) {
            pagingData._current = 1;
            e.preventDefault();
        }

        function requestContinue() {
            APP.loading(that);
            dispatch({
                type: "noticeModel/list",
                payload: params,
                callback: function (data) {
                    APP.closeLoading(that);
                    if (data.success) {
                        const {list, pagination} = data.datas;
                        pagingData._current = pagination.current;
                        pagingData._pageSize = pagination.pageSize;
                        pagingData._total = pagination.total;
                        that.setState({
                            pageDataSource: list,
                            selectedKeys: []
                        });
                    }
                }
            });
        }

        form.validateFieldsAndScroll((err, values) => {
            APP.validNilParams(values);
            params = {...params, ...values};
            params.isenabled = 1;
            requestContinue();
        });
    };

    findResponseByUrl(fileUrl, callback) {
        const that = this;
        const {dispatch} = that.props;
        if (!APP.isValidObj(fileUrl)) {
            APP.closeLoading(that);
            return;
        }
        if (!fileUrl.startsWith('https://')) {
            callback(fileUrl);
            return;
        }
        const formData = new window.FormData();
        formData.append('fileUrl', fileUrl);
        dispatch({
            type: 'commonModel/getResponseByFileUrl',
            payload: formData,
            callback: function(data) {
                if (data.success) {
                    if (APP.isValidObj(callback)) {
                        callback(data.result);
                    }
                } else {
                    APP.errorMessage(data.msg);
                }
            },
        });
    }
}

const ShowNoticeModal = Form.create()(props => {
    let {parent} = props;
    const {isShowModal, showData, loading} = parent.state;

    function handlerEditModal() {
        let {isShowModal, showData} = parent.state;
        isShowModal = !isShowModal;
        showData = {};
        parent.setState({isShowModal, showData});
    }

    return (
        <Modal
            visible={isShowModal}
            title={showData.title}
            confirmLoading={loading}
            onCancel={() => handlerEditModal()}
            footer={false}
            closable={false}
            width={1000}
        >
            <div dangerouslySetInnerHTML={{__html:showData.content}} />
        </Modal>
    );
});

export default NoticeLook;
